<template>
    <div class="money">
        <div class="home">
            <!-- <van-cell title="选择单个日期" :value="date" @click="show = true" />
            <van-calendar v-model="show" @confirm="onConfirm" /> -->
            <table>
                <thead>
                    <tr>
                        <th colspan="2">
                            <span class="left">«</span>
                        </th>
                        <th colspan="3">
                            <span class="time"></span>
                        </th>
                        <th colspan="2"><span class="right">»</span>
                        </th>
                    </tr>
                    <tr class="tr">
                        <th class="th">日</th>
                        <th class="th">一</th>
                        <th class="th">二</th>
                        <th class="th">三</th>
                        <th class="th">四</th>
                        <th class="th">五</th>
                        <th class="th">六</th>
                    </tr>
                </thead>
                <tbody class="main">
                </tbody>
            </table>
            <div class="btn">
                <button class="button" style="float: left;"> <router-link to="wrapper">每日签到</router-link></button>
                <button class="button2" @click="incrementClickCount" style="float: left;">点击获得</button>
                <router-view></router-view>
            </div>
            <div class="word">
                <h2 class="h2a">每天签到可获得大量金币</h2>
                <h2 class="h2b">您已拥有<span class="span">{{ num }}</span><img src="./pages/img/financing.png"></h2>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../common/less/varible.less';

// scoped 作用域
.money {
    font-family: @fontfamily;
    // background-color:  rgba(248, 219, 222,.4);
}

* {
    font-family: @fontfamily;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.home {
    overflow: hidden;
    width: 100%;
    padding-top: 120px;

}

button {
    width: 100px;
    height: 40px;
    font-size: 20px;
    float: left;
    margin-left: 35px;
    padding-top: 5px;
}

.btn {
    margin-top: 20px;
    margin-left: 30px;
}

#month {
    text-align: center;
    height: 50px;
}

table {
    margin-left: 40px;
    width: 300px;
    color: #000000;
}

td,
th {
    text-align: center;
    height: 50px;
}

.main {
    text-align: center;
}

.word {
    width: 100%;

    h2 {
        width: 100%;
        font-size: 28px;
        margin-top: 20px;
    }

    .h2a {
        margin-left: 20px;
    }

    .h2b {
        width: 100%;
        text-align: right;

        span {
            margin-left: 10px;
            margin-right: 10px;
        }

        img {
            width: 8%;
            float: right;
            margin-right: 20px;
        }
    }

}
</style>
<script>
import { Dialog } from 'vant';
import { Popup } from 'vant';
import { Cell } from 'vant';
// Vue.use(Popup);
// import Vue from 'vue';

import WrapperView from '@/views/WrapperView.vue';
export default {
    components: {
        WrapperView,
        [Popup.name]: Popup,
        [Cell.name]: Cell
    },
    data() {
        return {
            date: '',
            show: false,
            num: "",
            clickCount: localStorage.getItem('buttonClicks') || 0,
            today: new Date().toDateString(),
            clickLimit: 5,
            remainingClicks: 5
        };
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        incrementClickCount() {
            const today = new Date().toDateString();
            if (this.today === today && this.remainingClicks > 0) {
                this.clickCount++;
                this.num = localStorage.getItem('buttonClicks');
                this.remainingClicks--;
                localStorage.setItem('buttonClicks', this.clickCount);
                localStorage.setItem('remainingClicks', this.remainingClicks);
                localStorage.setItem('today', today);
            } else if (this.today !== today) {
                this.today = today;
                this.clickCount = 0;
                this.remainingClicks = this.clickLimit;
                localStorage.setItem('buttonClicks', 0);
                localStorage.setItem('remainingClicks', this.clickLimit);
                localStorage.setItem('today', today);
            } else {
                // 提示用户当天已达到点击上限
                alert('您今天已达到点击上限，无法继续点击。');
            }
        },
        clearClickCount() {
            localStorage.removeItem('buttonClicks');
            this.clickCount = 0;
        },

    },
    created() {
        const storedValue = localStorage.getItem('buttonClickStatus');
        if (storedValue) {
            this.isButtonClicked = JSON.parse(storedValue); // 如果需要的话，可以解析JSON字符串
        }
    },

    // 访问这个组件之前的钩子函数
    beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        // 获取token
        let token = localStorage.getItem("AUTO_TOKEN");
        // 判断是有值
        if (token) {
            next(true);
        }
        else {
            Dialog.confirm({
                title: '您还没登录',
                message: '要跳转到登录页面吗?',
            })
                .then(() => {
                    // on confirm （确定）
                    next({ path: '/login' })
                })
                .catch(() => {
                    // on cancel （取消）
                    next(false);
                });
        }
    },
    mounted() {
        const storedToday = localStorage.getItem('today');
        const storedClickCount = localStorage.getItem('buttonClicks');
        const storedRemainingClicks = localStorage.getItem('remainingClicks');
        if (storedToday) {
            this.today = storedToday;
        } else {
            this.today = new Date().toDateString();
        }
        if (storedClickCount) {
            this.clickCount = parseInt(storedClickCount);
            this.num = storedClickCount;
        } else {
            this.clickCount = 0;
        }
        if (storedRemainingClicks) {
            this.remainingClicks = parseInt(storedRemainingClicks);
        } else {
            this.remainingClicks = this.clickLimit;
        }



        var oTime = document.querySelector(".time") //头部年月标题显示
        var oMain = document.querySelector(".main") //主体日历数字显示
        var leftBtn = document.querySelector(".left"); //点击左边的按钮，月份减少
        var rightBtn = document.querySelector(".right"); //点击右边的按钮，月份增加
        var time = new Date(); //获取当前系统时间
        leftBtn.onclick = function () {
            time.setMonth(time.getMonth() - 1);
            getPrevDays(time);
            getCurrentDays(time);
            minHead(time);
            mainList(time, getPrevDays(time), getCurrentDays(time));
        }
        rightBtn.onclick = function () {
            time.setMonth(time.getMonth() + 1);
            getPrevDays(time);
            getCurrentDays(time);
            minHead(time);
            mainList(time, getPrevDays(time), getCurrentDays(time));
        }

        function minHead(time) {
            oTime.innerText = time.getFullYear() + "年" + (time.getMonth() + 1) + "月"
        }

        function mainList(time, prevDays, currentDays) {
            var beforeCount = prevDays.length + currentDays.length;
            var cellList = document.querySelectorAll("td");
            for (var i = 0; i < prevDays.length; i++) { //上一个月所占格子
                cellList[i].innerHTML = "<font color='#ccc'>" + prevDays[i] + "</font>"
            }
            for (var i = 0; i < currentDays.length; i++) { //当前月所占格子
                if (currentDays[i] == time.getDate()) { //当天日期高亮显示
                    cellList[i + prevDays.length].innerHTML = "<font color='red'>" + currentDays[i] + "</font>";
                } else { //当月日期白色突出
                    cellList[i + prevDays.length].innerHTML = "<font color='#000000'>" + currentDays[i] + "</font>";
                }
            }
            for (var i = 1; i <= (42 - beforeCount); i++) { //下个月所占格子
                cellList[i + beforeCount - 1].innerHTML = "<font color='#ccc'>" + i + "</font>"
            }
        }

        function createCells() {
            for (var i = 0; i < 6; i++) { //6行
                var oTr = document.createElement("tr");
                for (var j = 0; j < 7; j++) { //7列
                    var oTd = document.createElement("td");
                    oTr.appendChild(oTd);
                }
                oMain.appendChild(oTr);
            }
        }

        function getPrevDays(time) { //获得上一个在本月所占的天数
            var time = new Date(time); //拷贝一份时间，避免时间修改发生冲突
            var list = []; //上一个月所占的天数
            time.setDate(1); //设置成当月1号，便于查看是星期几；
            var day = time.getDay() == 0 ? 7 : time.getDay(); //如果是0，说明数字第一行需要空出来放上一个月的时间
            //获取上一个月的天数
            time.setDate(0); //系统自动计算到上一个月的最后一天
            var maxDay = time.getDate(); //得到上一个月的最后一天时间
            for (var i = maxDay; i > (maxDay - day); i--) {
                //根据maxDay和day之间的关系，把上一个月的时间放到list中
                list.push(i);
            }
            list.reverse(); //日期升序排列
            return list;
        }

        function getCurrentDays(time) { //获取当前月的天数
            var time = new Date(time); //拷贝时间，原因同上
            time.setDate(1); //确保不会出现跨越现象  如果当前时间是1月31号就会出现跨越到三月份的事情
            var list = [];
            //下面代码是为了获取上一个月的天数
            time.setMonth(time.getMonth() + 1) //修改时间到下一个月
            time.setDate(0); //修改时间日期是0
            var maxDay = time.getDate();
            //获取到上一个月的日期并放到数组中
            for (var i = 1; i <= maxDay; i++) {
                list.push(i);
            }
            return list;
        }
        createCells(); //创建6行7列表格
        getPrevDays(time); //获取上一个月在当前月所占的格子数
        getCurrentDays(time); //获取当前月所占的格子数
        minHead(time); //显示头部标题
        mainList(time, getPrevDays(time), getCurrentDays(time)); //显示主题日历

    },
};
</script>